

import { Row, Col, Button, Modal, Form, Input, message, Table, Tag, Popconfirm } from "antd"
import { useEffect, useRef, useState } from "react"
import { $http } from "../../api"
import { observer } from "mobx-react"
import { mbdata } from "../../mobx/data"
import {
  UserOutlined,
  DeleteOutlined,
  EditOutlined
} from '@ant-design/icons';
const { Search } = Input
function XuekeCpt() {
  const [show, setShow] = useState(false)
  const [flag, setFlag] = useState(false)
  const [obj, setObj] = useState({})
  const updateform = useRef()
  const updateOk = () => {
    updateform.current.validateFields()
      .then(value => {
        $http.updatexueke({
          _id: obj._id,
          ...value
        })
          .then(res => {
            if (res.code == 200) {
              var arr = mbdata.xuekeList.map((item => {
                if (item._id == obj._id) {
                  item = { ...item, ...value }

                }
                return item
              }))
              mbdata.changexuekeList(arr)
              setFlag(false)
              setObj({})
            }
          })
      })
      .catch(err => {
        message.error("请输入有效的数据")
      })
  }
  const updateeCancel = () => {
    setFlag(false)
    setObj({})
  }
  const updateItem = item => {
    setFlag(true)
    setObj(item)  //_id   value  text 
    setTimeout(() => {
      updateform.current.setFieldsValue(item)
    }, 150)
  }
  const handleOk = () => {
    form.current.validateFields()
      .then(value => {
        $http.addxueke(value)
          .then(res => {
            if (res.code == 200) {
              getXuekeList()
              setShow(false)
              form.current.resetFields()
            }
          })
      })
      .catch(err => {
        message.error("请输入有效的数据")
      })
  }

  const getXuekeList = () => {
    $http.getxueke()
      .then(res => {
        if (res.code == 200) {
          mbdata.changexuekeList(res.result)
        }
      })
  }

  useEffect(() => {
    if (!mbdata.xuekeList.length > 0) {
      getXuekeList()
    }

  }, [])

  const handleCancel = () => {
    setShow(false)
  }

  const form = useRef()
  const deleteOne = (item) => {
    $http.delxueke({
      _id: item._id
    })
      .then(res => {
        if (res.code == 200) {
          var arr = mbdata.xuekeList.filter(val => val._id != item._id)
          mbdata.changexuekeList(arr)
        }
      })
  }
  const columns = [
    {
      title: "#",
      align: "center",
      render: (value, item, index) => {
        return (index + 1)
      }
    },
    {
      title: "学科名称",
      align: "center",
      render: (value, item, index) => {
        return (
          <Tag color="#123456">
            {value.text}
          </Tag>
        )
      }
    },
    {
      title: "学科编码",
      align: "center",
      key: "value",
      dataIndex: "value",
      render: (value, item, index) => {
        return (
          <Tag color="orange">
            {item.value}
          </Tag>
        )
      }
    },
    {
      title: "操作",
      align: "center",
      render: (value, item, index) => {
        return (
          <div>
            <Popconfirm
              title={'你真的要删除吗?'}
              onConfirm={() => deleteOne(item)}
              okText="确认"
              cancelText="取消"

            >
              <Button type="danger" shape="circle" icon={<DeleteOutlined />} size={30} ></Button>
            </Popconfirm>
            <Button type="primary" onClick={() => updateItem(item)} style={{ marginLeft: 10 }} shape="circle" icon={<EditOutlined />} size={30} ></Button>
          </div>
        )
      }
    },
  ]
  const startSearch = value => {
    $http.getxueke({
      keyword: value
    })
      .then(res => {
        if (res.code == 200) {
          mbdata.changexuekeList(res.result)
        }
      })
  }
  return (
    <div>
      <h2> 学科管理</h2>
      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={18} style={{ display: 'flex' }}>
          <Button type="primary" onClick={() => setShow(true)}>添加学科</Button>
        </Col>
      </Row>


      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={10} style={{ display: 'flex' }}>
          <Search placeholder="请输入搜索关键字" enterButton onSearch={startSearch} />

        </Col>
      </Row>

      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={18} style={{ display: 'flex' }}>
          <Table
            dataSource={mbdata.xuekeList}
            columns={columns}
            sticky
            bordered
            id="table"
            rowKey={item => item._id}
            pagination={{ pageSize: 6 }}
          >

          </Table>
        </Col>
      </Row>

      <Modal title="添加学科"
        visible={show}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="添加"
        cancelText="取消"
        style={{ width: 240 }}
      >
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
          }}
          ref={form}
          layout={"vertical"}
          style={{ maxWidth: 240 }}
        >
          <Form.Item
            name="text"
            label="学科名称"
            rules={[
              {
                required: true,
                message: '请输入学科名称',
              },
            ]}
          >
            <Input placeholder="请输入公学科名称" />
          </Form.Item>

          <Form.Item
            name="value"
            label="学科编码"
            rules={[
              {
                required: true,
                message: '请输入学科编码',
              }
            ]}
          >
            <Input placeholder="请输入学科编码" />
          </Form.Item>
        </Form>
      </Modal>




      <Modal
        title="修改学科"
        visible={flag}
        onOk={updateOk}
        onCancel={updateeCancel}
        okText="确定"
        cancelText="取消"
        style={{ width: 240 }}
        okType="danger"
      >
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
          }}
          ref={updateform}
          layout={"vertical"}
          style={{ maxWidth: 240 }}
        >
          <Form.Item
            name="text"
            label="学科名称"
            rules={[
              {
                required: true,
                message: '请输入学科名称',
              },
            ]}
          >
            <Input placeholder="请输入公学科名称" />
          </Form.Item>

          <Form.Item
            name="value"
            label="学科编码"
            rules={[
              {
                required: true,
                message: '请输入学科编码',
              }
            ]}
          >
            <Input placeholder="请输入学科编码" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}


export default observer(XuekeCpt)